<tr class="kuiTableRow">
  <!-- Name -->
  <td class="kuiTableRowCell kuiTableRowCell--wrap">
    <div class="kuiTableRowCell__liner">
      <p class="kuiTextTitle kuiVerticalRhythmSmall">
        {{conf.name}}
      </p>

      <p
        class="kuiSubText kuiSubduedText kuiVerticalRhythmSmall"
        ng-if="!isDefaultValue(conf)"
      >
        Default: <em>{{conf.defVal == undefined || conf.defVal === '' ? 'null' : conf.defVal}}</em>
      </p>

      <p
        class="kuiSubText kuiSubduedText kuiVerticalRhythmSmall"
        ng-if="conf.isCustom"
      >
        (Custom setting)
      </p>

      <p
        class="kuiSubText kuiVerticalRhythmSmall"
        ng-bind-html="conf.description | trustAsHtml"
      ></p>
    </div>
  </td>

  <!-- Value -->
  <td class="kuiTableRowCell">
    <div class="kuiTableRowCell__liner">
      <!-- Settings editors -->
      <form
        name="forms.configEdit"
        ng-if="conf.editing"
        ng-submit="save(conf)"
        role="form"
      >
        <input
          ng-if="conf.normal"
          ng-model="conf.unsavedValue"
          ng-keyup="maybeCancel($event, conf)"
          placeholder="{{conf.value || conf.defVal}}"
          type="text"
          class="kuiTextInput fullWidth"
        >

        <textarea
          ng-if="conf.markdown"
          type="text"
          class="kuiTextArea fullWidth"
          ng-model="conf.unsavedValue"
          ng-keyup="maybeCancel($event, conf)"
          elastic-textarea
          data-test-subj="unsavedValueMarkdownTextArea"
        ></textarea>

        <textarea
          ng-if="conf.json"
          type="text"
          class="kuiTextArea fullWidth"
          ng-model="conf.unsavedValue"
          ng-keyup="maybeCancel($event, conf)"
          elastic-textarea
          validate-json
          data-test-subj="unsavedValueJsonTextArea"
        ></textarea>

        <p
          class="kuiSubText"
          ng-show="forms.configEdit.$error.jsonInput"
        >
          Invalid JSON syntax
        </p>

        <input
          ng-if="conf.array"
          ng-list=","
          ng-model="conf.unsavedValue"
          ng-keyup="maybeCancel($event, conf)"
          placeholder="{{(conf.value || conf.defVal).join(', ')}}"
          type="text"
          class="kuiTextInput fullWidth"
        >

        <input
          ng-if="conf.bool"
          ng-model="conf.unsavedValue"
          type="checkbox"
          class="kuiCheckBox"
          data-test-subj="advancedSetting-{{conf.name}}-checkbox"
        >

        <select
          ng-if="conf.select"
          name="conf.name"
          ng-model="conf.unsavedValue"
          ng-options="option as option for option in conf.options"
          class="kuiSelect"
        ></select>

        <input
          ng-if="conf.image"
          ng-model="conf.unsavedValue"
          input-base-sixty-four
          max="{{conf.options.maxSize && conf.options.maxSize.length}}"
          accept=".jpg,.jpeg,.png"
          type="file"
          class="fullWidth"
          on-change="onImageChange"
        >

        <p
          class="kuiSubText"
          ng-show="forms.configEdit.$error.maxSize"
        >
          Image is too large, maximum size is {{conf.options.maxSize.description}}
        </p>

      </form>

      <!-- Setting display formats -->
      <span
        ng-if="!conf.editing"
        data-test-subj="advancedSetting-{{conf.name}}-currentValue"
      >
        <span ng-if="(conf.normal || conf.json || conf.select)">
          {{conf.value || conf.defVal}}
        </span>
        <span ng-if="conf.array">
          {{(conf.value || conf.defVal).join(', ')}}
        </span>
        <span ng-if="conf.bool">
          {{conf.value === undefined ? conf.defVal : conf.value}}
        </span>
        <span
          ng-if="conf.markdown"
          ng-bind-html="conf.value | markdown"
        ></span>
        <img
          alt="Image"
          ng-if="conf.image && conf.value"
          ng-src="{{ conf.value }}"
          class="advancedSettingsTableRowImage"
        ></img>
      </span>
    </div>
  </td>

  <!-- Actions -->
  <td class="kuiTableRowCell advancedSettingsTableRowActionsCell">
    <div class="kuiTableRowCell__liner">
      <div class="kuiMenuButtonGroup kuiMenuButtonGroup--alignRight">
        <!-- Edit -->
        <button
          ng-if="!conf.editing"
          ng-click="edit(conf)"
          class="kuiMenuButton kuiMenuButton--basic kuiMenuButton--iconText"
          ng-disabled="conf.tooComplex"
          aria-label="Edit {{conf.ariaName}}"
          data-test-subj="advancedSetting-{{conf.name}}-editButton"
        >
          <span
            aria-hidden="true"
            class="kuiMenuButton__icon kuiIcon fa-pencil"
          ></span>
          <span>Edit</span>
        </button>

        <!-- Save -->
        <button
          ng-if="conf.editing"
          ng-click="save(conf)"
          class="kuiMenuButton kuiMenuButton--primary kuiMenuButton--iconText"
          ng-disabled="conf.loading || conf.tooComplex || forms.configEdit.$invalid"
          aria-label="Save edit"
          data-test-subj="advancedSetting-{{conf.name}}-saveButton"
        >
          <span
            aria-hidden="true"
            ng-if="!conf.loading"
            class="kuiMenuButton__icon kuiIcon fa-save"
          ></span>
          <span
            aria-hidden="true"
            ng-if="conf.loading"
            class="kuiMenuButton__icon kuiIcon fa-spinner"
          ></span>
          <span>Save</span>
        </button>

        <!-- Clear -->
        <button
          ng-if="!conf.editing"
          ng-click="clear(conf)"
          ng-hide="isDefaultValue(conf)"
          aria-label="Clear {{conf.ariaName}}"
          class="kuiMenuButton kuiMenuButton--danger kuiMenuButton--iconText"
          data-test-subj="advancedSetting-{{conf.name}}-clearButton"
        >
          <span
            aria-hidden="true"
            class="kuiMenuButton__icon kuiIcon fa-trash-o"
          ></span>
          <span>Clear</span>
        </button>

        <!-- Cancel -->
        <button
          ng-if="conf.editing"
          ng-click="cancelEdit(conf)"
          class="kuiMenuButton kuiMenuButton--basic kuiMenuButton--iconText"
          aria-label="Cancel edit"
        >
          <span
            aria-hidden="true"
            class="kuiMenuButton__icon kuiIcon fa-times"
          ></span>
          <span>Cancel</span>
        </button>
      </div>
    </div>
  </td>
</tr>
